<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>云茗茶城-首页</title>
<%@include file="common/header.jsp" %>


	<link rel="stylesheet" href="css/login.css" />
	<link rel="stylesheet" href="css/index.css">
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/login.js" ></script>
</head>
<body>
 <div class="top">
        <div class="top_con clearfix">
            <div class="logo fl"></div>
            <div class="nav fl">
                <div class="nav-im fl"></div>
                <ul class="fl .t_d">
                    <li><a href="index.jsp">茶坊首页</a></li>
                    <li><a href="culture.jsp">品德文化</a></li>
                    <li><a href="showtealists.jsp">茶品展示</a></li>
                    <li><a href="newsCentre.jsp">新闻中心</a></li>
                    <li><a href="#">营销服务</a></li>
                    <li><a href="#">招商联盟</a></li>
                    <li><a href="contactus.jsp">联系我们</a></li>
                    <li><a href="TeaServlet?opt=sel">茶具商店</a></li>
                </ul>
            </div>
            <div class="login fr">
                <c:if test="${ !empty (User)}">
                	<p class="p2">欢迎${User.passname }!</p>
                </c:if>
                <c:if test="${empty User }">
                <a href="myinfo.jsp"><img src="images/login.png" alt=""/></a>
                <p class="p1" ><a id="Login_start_" href="<%=request.getContextPath()%>/login1.jsp">登录</a>·<a id="Regist_start_" href="<%=request.getContextPath()%>/login2.jsp" >注册</a></p>
                <p class="p2">中/En</p>
                </c:if>
            </div>
        </div>
        <div class="search_box">
            <p class="sar_tit">生态茶园</p>
            <p class="sar_c">专业化生产高品质茶叶产品</p>
            <p class="sar_c2">Specialized production high-quality tea products</p>
            <script>
            $(function(){
            	$("#keyword").keyup(function(){
            		var keyword=this.value;
            		$.ajax({
            			url:"TeaServlet",
            			type:"get",
            			data:"opt=suggest&keyword="+keyword,
            			dataType:"json",
            			success:function(result){
            				//var str=result.split(",");
            				var re="";
            				if(result.length>0){
            					for(var i=0;i<result.length;i++){
            						/* re+="<div>"+str[i]+"</div>"; */
            						re+="<div style='color:black;font-size:15px;padding:10px;' onclick='setSearch_onclick(this)' onmouseout='changeBackColor_out(this)' onmouseover='changeBackColor_over(this)'>"+result[i]+"</div>";
            					}
            					$("#suggest").html(re); 
            					$("#suggest").css("background-color","white");
            					$(".hot_tea").css("display","none");
            				}
            			}
            		})
            		
            	})
            })
            //鼠标移动到内容上
			 function changeBackColor_over(div){
			  $(div).css("background-color","#CCCCCC");
			 }
			 //鼠标离开内容
			 function changeBackColor_out(div){
			  $(div).css("background-color","");
			 }
			 //将点击的内容放到搜索框
			 function setSearch_onclick(div){
			  var teaname=$(div).html();
			  $.ajax({
				  url:"TeaServlet",
				  type:"get",
				  data:"opt=selname&teaname="+teaname,
				  //datatype:""
				  success:function(go2){
					  if(go2){
						  window.location.href='teashow.jsp';
					  }
				  }
			  })
			 }
            </script>
            <input type="text" placeholder="想找点什么？" name="keyword" id="keyword" >
            <div id="suggest" style="width: 980px;border: 1px solid #666;border-radius: 7px;opacity:0.6;background-color:#666;left:310px;top:310px;position: absolute;font-color:black;"></div>
            <p class="hot_tea">热门茶品:<a href="#">普洱生茶</a><a href="#">普洱熟茶</a><a href="#">西湖龙锦</a><a href="#">大红袍</a><a href="#">茉莉花茶</a><a href="#">高山乌龙</a></p>
            <ul class="page">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <a href="#"><div class="search_btn btn1"></div></a>
            <a href="#"> <div class="search_btn btn2"></div></a>
        </div>
    </div>
    <!-- header结束 -->
    
    <!--
    	作者：offline
    	时间：2018-10-15
    	描述：会员登录开始
    -->

<%@include file="common/footer.jsp"%>
</body>
</html>